import React from 'react'
import marked from 'marked'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Highlight from 'react-highlight'
import { Icon } from 'antd'
import { changeTitle, changeContent, changeReviewFlag } from '../../store/blog.redux'

import '../../node_modules/highlight.js/styles/agate.css'

class MarkDownMiddle extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: true
        }
    }
    filterText(dom) {
        return dom.innerText.substring(0, 300)
    }

    changeText() {
        const content = this.refs.MarkLeftText.value
        const shortContent = this.filterText(this.refs.MarkRightText)
        this.props.changeContent({ content, shortContent })
    }

    titleChange() {
        this.props.changeTitle(this.refs.input.value)
    }

    switchContent() {
        this.props.changeReviewFlag(!this.props.BlogReducer.reviewFlag)
    }

    render() {
        const title = this.props.BlogReducer.title
        const content = this.props.BlogReducer.content
        const reviewFlag = this.props.BlogReducer.reviewFlag
        const output = marked(content)
        return (
            <div className="MarkdownWrapper">
                <div>
                    <input className="title" ref="input" value={title} placeholder="请输入博客标题" onChange={() => this.titleChange()} />
                    <span className="review" onClick={() => this.switchContent()}>{!reviewFlag ? '预览' : '预览中'}<Icon type="eye" style={{ margin: '0 0 0 5px' }} /></span>
                </div>
                <div className="MarkDownMiddle">
                    <div className="markDownLeft" style={{ display: !reviewFlag ? 'block' : 'none' }}>
                        <textarea ref="MarkLeftText" className="text-content" onChange={() => this.changeText()}
                            value={content} />
                    </div>
                    <div className="markDownRight" style={{ display: reviewFlag ? 'block' : 'none' }} ref="MarkRightText">
                        <Highlight innerHTML>
                            {output}
                        </Highlight>
                    </div>
                </div>
                <style>{`
                    .MarkdownWrapper {
                        min-height: 100%;
                        position: relative;
                    }

                    .title {
                        display: inline-block;
                        padding: 5px 0;
                        width: 90%;
                        border-top: 0;
                        border-right: 0;
                        border-left: 0;
                        border-bottom: 1px solid #d3cece;
                        outline: none;
                        font-size: 15px;
                    }

                    .review {
                        display: inline-block;
                        width: 10%;
                        padding: 5px 5px 0 0;
                        text-align: right;
                        cursor: pointer;
                        color: #0c7dd0;
                    }

                    .MarkDownMiddle{
                        position: absolute;
                        left: 0;
                        top: 33px;
                        bottom: 0;
                        width: 100%;
                        padding: 10px 0 0 0;
                        line-height: 30px;
                    }

                    .markDownLeft{
                        flex: 0 0 100%;
                        height: 100%;
                    }

                    .text-content{
                        margin: 0;
                        padding: 0 0;
                        width: 100%;
                        display: block;
                        height: 100%;
                        font-size: 14px;
                        color: #555555;
                        outline: none;
                        border: 0;
                        resize: none;
                        override-y: scroll;
                    }

                    .markDownRight{
                        flex: 0 0 100%;
                        height: 100%;
                        overflow-y: auto;
                    }

                    .markDownRight img {
                        width: 100%;
                    }
                `}</style>
            </div>
        )
    }
}

const mapStateToProps = ({ BlogReducer }) => ({ BlogReducer })
const mapDispatchToProps = (dispatch) => {
    return {
        changeContent: bindActionCreators(changeContent, dispatch),
        changeTitle: bindActionCreators(changeTitle, dispatch),
        changeReviewFlag: bindActionCreators(changeReviewFlag, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(MarkDownMiddle)